<template>
  <div class="edit-log-dialog">
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :show-close="true"
      :append-to-body="true"
      :class="{'global-mobile-dialog':showMobilePage}"
      class="small-common-dialog-size"
      @close="closeDialog"
      @open="openDialog"
    >
      <Title title="修改备注" font-size="16px" style="margin: 0 0 24px"/>
      <el-form ref="editRemarkForm" :model="remarkInfo" :rules="rules" label-width="70px" label-position="left">
        <el-form-item label="备注：" prop="remark">
          <el-input
            :rows="5"
            v-model="remarkInfo.remark"
            placeholder="请输入"
            resize="none"
            name="remark"
            type="textarea"
            maxlength="500"
            style="width: 240px;word-break: break-word;"
          />
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button class="ok" type="primary" @click="handelOk">确定</el-button>
        <el-button class="cancel-btn-style" type="info" @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { mapState } from 'vuex';

export default {
  name: 'EditLogDialog',
  components: { Title },
  props: {
    editApi: {
      type: Function,
      default: () => {}
    },
    orderType: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      id: null,
      antiShakeTime: 0, // 防抖时间
      dialogVisible: false,
      isSubmit: false,
      rules: {},
      remarkInfo: {
        remark: ''
      }
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    closeDialog() {
      this.dialogVisible = false;
    },
    openDialog(id) {
    },
    initData(info) {
      this.id = info.id;
      this.remarkInfo.remark = info.remarks;
    },
    handelOk() {
      var timestamp = Date.parse(new Date());
      if (timestamp - this.antiShakeTime < 500) {
        return;
      }
      this.antiShakeTime = timestamp;
      if (this.isSubmit) {
        return;
      }
      this.isSubmit = true;
      const params = {
        id: this.id,
        remark: this.remarkInfo.remark
      };
      if (this.orderType || this.orderType === 0) params.orderType = this.orderType;
      this.editApi(params).then(res => {
        this.isSubmit = false;
        if (res.code === 200) {
          this.handleSuccess();
        }
      }).catch(e => {
        this.isSubmit = false;
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.remarkInfo.remark = '';
      this.id = '';
    },
    handleSuccess() {
      this.$emit('success');
      this.dialogVisible = false;
      this.$message({ type: 'success', message: '编辑成功' });
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
